<template>
    <div id="droneVideo">
        <video id="flvPlayer" controls width="100vw" style="width: 100%; height: 100%;"></video>
    </div>
</template>

<script>
    import flvjs from 'flv.js'

    export default {
        mounted() {
            // 检查浏览器是否支持 MediaSource Extensions（flv.js 依赖此 API）
            if (flvjs.isSupported()) {
                const videoElement = document.getElementById('flvPlayer')
                // 初始化 FLV 播放器
                const flvPlayer = flvjs.createPlayer({
                    type: 'flv', // 视频类型
                    // url: 'http://113.249.103.121:8078/live/livestream.flv' // 视频流地址
                    url: 'http://111.120.11.161:8079/live/livestream.flv' // 视频流地址
                })
                // 将播放器挂载到 video 元素
                flvPlayer.attachMediaElement(videoElement)
                // 加载并播放
                flvPlayer.load()
                flvPlayer.play().catch(err => {
                    console.error('播放失败：', err) // 处理播放权限等错误
                    // this.$Message.warning('播放失败');
                })
            } else {
                console.error('当前浏览器不支持 FLV 播放')
                this.$Message.warning('当前浏览器不支持 FLV 播放');
            }
        }
    }
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}

/deep/#droneVideo {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: auto !important;
}
</style>
